<template>
  <div class="page">
    <van-nav-bar :title="$t('交易桥')" :border="false">
      <template #right>
        <!-- 国际化切换 -->
        <lang></lang>
      </template>
    </van-nav-bar>

    <div class="container pb-50">
      <!-- 钱包信息 -->
      <div class="box lh-2 mb-10">
        <div>
          <span>{{ $t('钱包地址') }}：</span>
          <span class="click" @click="copyString(fromAddressRef)">
            {{ fromAddressHideRef }}
          </span>
        </div>

        <div class="flex flex-rb">
          <div>
            <span class="cl-success">USDT：</span>
            <span>{{ balance }}</span>
          </div>
        </div>
      </div>

      <!-- Banner图 -->
      <div class="mb-10">
        <img style="width: 100%" src="../assets/img/banner.png" />
      </div>

      <!-- 通知 -->
      <div class="mb-10">
        <van-notice-bar mode="link">
          <template #left-icon>
            <img class="icon mr-10" src="../assets/img/notice.png" />
          </template>

          <div class="fz-13">{{ $t('关于我们') }}</div>
        </van-notice-bar>
      </div>

      <!-- 功能中心 -->
      <div class="mb-10">
        <div class="title title--border">{{ $t('功能中心') }}</div>

        <div class="box pt-15 pb-15">
          <div class="mb-20">
            <span>{{ $t('我的邀请链接') }}：</span>
            <span class="click" @click="copyString(inviteLink)">
              {{ inviteLink }}
            </span>
          </div>

          <div class="flex flex-rb">
            <van-button
              class="btn"
              type="primary"
              v-for="(v, i) in tabs"
              :key="i"
              :plain="tabIndex !== i"
              @click="tabIndex = i"
            >
              {{ v }}
            </van-button>
          </div>
        </div>
      </div>

      <!-- 质押 -->
      <pledge v-if="tabIndex === 0"></pledge>

      <!-- 市场 -->
      <market v-else-if="tabIndex === 1"></market>

      <!-- 收益 -->
      <profit v-else-if="tabIndex === 2"></profit>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStore } from '@/store/index'
import { useI18n } from 'vue-i18n'
import lang from 'comps/lang.vue'
import pledge from 'comps/pledge.vue'
import market from 'comps/market.vue'
import profit from 'comps/profit.vue'
import { showError, toNumber, copyString } from 'js/utils'
import apis from 'js/apis'

const store = useStore()
const { t } = useI18n()

// 类型
const tabs = computed(() => [t('质押'), t('市场'), t('收益')])
const tabIndex = ref(0)

const fromAddressRef = ref(fromAddress)
const fromAddressHideRef = ref(fromAddressHide)
const balance = ref(null)
const inviteLink = ref(`${location.origin}/#/register?inviteId=${fromAddress}`)

initApp()
getConfig()
getXmPrice()

// 初始化App
async function initApp() {
  balance.value = await getAccountBalance()
  window.pandax = await getPandaxBalance()
}

// 获取账户余额
function getAccountBalance() {
  return new Promise(async (resolve, reject) => {
    try {
      console.log('获取账户余额')
      const balance = await usdtContract.context.methods
        .balanceOf(fromAddress)
        .call()
      const balanceInBigNumber = toNumber(balance)
      console.log(`获取账户余额成功：${balanceInBigNumber}`)
      resolve(balanceInBigNumber)
    } catch (err) {
      showError('获取账户余额失败')
      console.error('获取账户余额失败')
      console.error(err)
    }
  })
}

// 获取Pandax余额
function getPandaxBalance() {
  return new Promise(async (resolve, reject) => {
    try {
      console.log('获取Pandax余额')
      const balance = await pandaxContract.context.methods
        .balanceOf(fromAddress)
        .call()
      const balanceInBigNumber = toNumber(balance)
      console.log(`获取pandax余额成功：${balanceInBigNumber}`)
      resolve(balanceInBigNumber)
    } catch (err) {
      showError('获取pandax余额失败')
      console.error('获取pandax余额失败')
      console.error(err)
    }
  })
}

// 获取配置项
async function getConfig() {
  const { code, data } = await apis.getConfig()

  if (code === 1) {
    store.setConfig(data)
  }
}

// 获取汇率
async function getXmPrice() {
  const { code, data } = await apis.getXmPrice()

  if (code === 200) {
    store.setXmPrice(data)
  }
}
</script>

<style lang="scss">
.icon {
  width: 22px;
}

.btn {
  width: 100px;
}
</style>
